<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TCL(数字科)-FAQ</title>
</head>

<body>
    <div class="box">
        <div class='change' id="change">
            <div class="c1">切换主题</div>

        </div>
        <div class="bc-yellow" id="bc">
            <div id='caiwu'>nomal</div>
            <div id='wuliu'>wms</div>
            <!-- <div id='divce'>mes</div> -->
        </div>
        <div id="content" class="contentc">
            <div id='caiwuc' class="content">
                <div>
                    <h3>我想连接office网络怎么办?</h3>
                    <div>第一步，打开浏览器并在地址栏输入10.147.232.50 </div>
                    <div>第二步，按照页面提示下载组件</div>
                </div>
                <div>
                    <h3>打印机出故障了怎么办？</h3>
                    <div>第一步，如果打印机有显示屏请按照显示屏提示的故障代码,解决打印机故障 </div>
                    <div>第二步，如果还未解决问题，请重启机器</div>
                </div>
                <div>
                    <h3>我想用打印机怎么办？</h3>
                    <div>第一步，首先判断电脑是云桌面还是个人电脑，云桌面请联系数字科同事进行协助解决；个人电脑可以自行在打印机官网上下载驱动使用</div>
                    <div>第二步，夏普打印机可以<a
                            href='https://www.sharp.cn/node/1323'>https://www.sharp.cn/node/1323</a>,选择对应的打印机驱动型号,选择自定义安装输入打印机ip
                    </div>
                    <h6>打印机ip：科技楼夏普10.147.19.40,总装办公室夏普打印机10.147.43.120,总装富士打印机10.147.43.207</h6>
                </div>
                <div>
                    <h3>我的电脑C盘满了怎么办？</h3>
                    <div>第一步，首先判断电脑是云桌面还是个人电脑，云桌面请联系数字科同事清理</div>
                    <div>第二步，个人电脑可自行打开浏览器清理</div>
                </div>
                <div>
                    <h3>我想重新安装搜狗打字或者其他的一些办公软件怎么办?</h3>
                    <div>第一步，打开qq浏览器下载<a
                            href="https://pc.qq.com/detail/0/detail_34920.html">https://pc.qq.com/detail/0/detail_34920.html</a>
                    </div>
                    <div>第二步，个人电脑可自行打开浏览器清理</div>
                </div>

                <div>
                    <h3>我的电脑C盘满了怎么办？</h3>
                    <div>第一步，首先判断电脑是云桌面还是个人电脑，云桌面请联系数字科同事清理</div>
                    <div>第二步，个人电脑可自行打开浏览器清理</div>
                    <h3>有待补充</h3>

                </div>
            </div>
            <div id='wuliuc' class="content">
                <h3>wms已经发运的出库单还未过账我想取消出货怎么办？</h3>
                取消发货:根据单证编号检索，右键取消
                <div>取消发货之后取消拣货，取消预配,恢复订单为订单创建状态取消订单</div>
                <h3>wms已经发运的出库单已过账我想取消出货怎么办？</h3>
                看是否过账:出库单上<span style="color: red;">SAP回传凭证</span>,明细行里看<span style="color: red;">接口页签SAP单号</span>
                <div>在空调R4武汉问题沟通@WMS-王汉迪</div>
            </div>
            <div id='divcec' class="content">内容3</div>
        </div>
        <div id="content1" class="contentc display">
            <div id='caiwuc1'>
                <div class="content flex">
                    <div class="f1">
                        <h3>我想连接office网络怎么办?</h3>
                        <div>
                            <div>第一步，打开浏览器并在地址栏输入10.147.232.50 </div>
                            <div>第二步，按照页面提示下载组件</div>
                        </div>
                    </div>
                    <div class="f1">
                        <h3>打印机出故障了怎么办？</h3>
                        <div>
                            <div>第一步，如果打印机有显示屏请按照显示屏提示的故障代码,解决打印机故障 </div>
                            <div>第二步，如果还未解决问题，请重启机器</div>
                        </div>

                    </div>
                    <div class="f1">
                        <h3>我想用打印机怎么办？</h3>
                        <div>
                            <div>第一步，首先判断电脑是云桌面还是个人电脑，云桌面请联系数字科同事进行协助解决；个人电脑可以自行在打印机官网上下载驱动使用</div>
                            <div>第二步，夏普打印机可以<a
                                    href='https://www.sharp.cn/node/1323'>https://www.sharp.cn/node/1323</a>,选择对应的打印机驱动型号,选择自定义安装输入打印机ip
                            </div>
                        </div>

                        <h6>打印机ip：科技楼夏普10.147.19.40,总装办公室夏普打印机10.147.43.120,总装富士打印机10.147.43.207</h6>
                    </div>
                    <div class="f1">
                        <h3>我的电脑C盘满了怎么办？</h3>
                        <div>
                            <div>第一步，首先判断电脑是云桌面还是个人电脑，云桌面请联系数字科同事清理</div>
                            <div>第二步，个人电脑可自行打开浏览器清理</div>
                        </div>
                    </div>
                    <div class="f1">
                        <h3>我想重新安装搜狗打字或者其他的一些办公软件怎么办?</h3>
                        <div>
                            <div>第一步，打开qq浏览器下载<a
                                    href="https://pc.qq.com/detail/0/detail_34920.html">https://pc.qq.com/detail/0/detail_34920.html</a>
                            </div>
                            <div>第二步，个人电脑可自行打开浏览器清理</div>
                        </div>
                    </div>
                    <div class="f1">
                        <h3>我的电脑C盘满了怎么办？</h3>
                        <div>
                            <div>第一步，首先判断电脑是云桌面还是个人电脑，云桌面请联系数字科同事清理</div>
                            <div>第二步，个人电脑可自行打开浏览器清理</div>
                        </div>
                    </div>
                </div>
            </div>
            <div id='wuliuc1'>
                <div class="content flex">
                    <!-- <input type="text" style="position:absolute;"> -->
                    <div class="f1">
                        <h3>wms已经发运的出库单还未过账我想取消出货怎么办？</h3>
                        <div>
                            <div>取消发货:根据单证编号检索，右键取消</div>
                            <div>取消发货之后取消拣货，取消预配,恢复订单为订单创建状态取消订单</div>
                        </div>
                    </div>
                    <div class="f1">
                        <h3>wms已经发运的出库单已过账我想取消出货怎么办？</h3>
                        <div>
                            <div>
                                看是否过账:出库单上<span style="color: red;">SAP回传凭证</span>,明细行里看<span
                                    style="color: red;">接口页签SAP单号</span>
                            </div>
                            <div>在空调R4武汉问题沟通@WMS-王汉迪</div>
                        </div>
                    </div>
                </div>
            </div>
            <div id='divcec1'>
                <div class="content">内容3</div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    window.onload = function () {
        //自适应字体 
        window.screen.width > 400 && (document.documentElement.style.fontSize = 8 + 'px')
        window.screen.width > 700 && (document.documentElement.style.fontSize = 14 + 'px')
        window.screen.width > 1500 && (document.documentElement.style.fontSize = 20 + 'px')
    }
    const element = document.createElement("box");
    let bc = document.querySelector("#bc");
    let c = document.querySelector("#content");
    let c1 = document.querySelector("#content1");
    let change = document.querySelector("#change");
    var active = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;
    //拖拽逻辑
    change.addEventListener('mousedown', function (e) {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;

        if (e.target === change) {
            active = true;
        }
    });

    document.addEventListener('mouseup', function () {
        active = false;
    });

    document.addEventListener('mousemove', function (event) {
        if (active) {
            currentX = event.clientX - initialX;
            currentY = event.clientY - initialY;
            xOffset = currentX;
            yOffset = currentY;
            setTranslate(currentX, currentY, change);
        }
    });

    function setTranslate(xPos, yPos, el) {
        el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
    let showC = true
    let totle = 0
    change.addEventListener('click', function (event) {
        if (showC) {
            c.style.display = 'none'
            c1.style.display = 'block'
            showC = false
            if (caidan == 'caiwu') {
                document.querySelector(`#${caidan + 'c1'}`).style.display = "block"
                document.querySelector('#wuliuc1').style.display = "none"
                document.querySelector('#divcec1').style.display = "none"
            } else if (caidan == 'wuliu') {
                document.querySelector(`#${caidan + 'c1'}`).style.display = "block"
                document.querySelector('#caiwuc1').style.display = "none"
                document.querySelector('#divcec1').style.display = "none"
            } else if (caidan == 'divce') {
                document.querySelector(`#${caidan + 'c1'}`).style.display = "block"
                document.querySelector('#wuliuc1').style.display = "none"
                document.querySelector('#caiwuc1').style.display = "none"
            }
        } else {
            c.style.display = 'block'
            c1.style.display = 'none'
            showC = true
        }
        let f1 = document.querySelectorAll(".f1");
        Array.prototype.forEach.call(f1, function (item) {
            window.screen.width > 400 && (item.style.height = 'fit-content')
            window.screen.width > 700 && (item.style.height = 'fit-content')
            window.screen.width > 1500 && (item.style.height = 15 + "rem")
        })

    })
    let caidan = 'caiwu'
    //内容显影
    bc.addEventListener("click", function (event) {
        // 处理逻辑
        if (showC) {
            Array.prototype.forEach.call(c.children, function (element) {
                element.style.display = "none"
                if (element.id == event.target.id + "c") {
                    element.style.display = "block";
                    caidan = event.target.id
                }
            });
        } else {
            Array.prototype.forEach.call(c1.children, function (element) {
                element.style.display = "none"
                if (element.id == event.target.id + "c1") {
                    element.style.display = "block";
                    caidan = event.target.id
                }
            });
        }

    });
    bc.addEventListener("mouseover", function (ev) {
        if (ev.target.id == "bc") {
        } else {
            ev.target.style.backgroundColor = "#4a749e";
        }
    });
    bc.addEventListener("mouseout", function (ev) {
        ev.target.style.background = "";
    });
</script>

<style>
    .flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .f1 {
        border-radius: 15px;
        width: 15rem;
        margin: 1rem 0rem;
        word-wrap: break-word;
        border: 1px black solid;
    }

    .f1 div:nth-child(1) {
        border-top: 1px solid black;

    }

    .display {
        display: none;
    }

    .change {
        position: absolute;
        top: 10rem;
        left: 2rem;
        width: 3rem;
        height: 3rem;
        font-size: 0.5rem;
        background-color: yellow;
        border-radius: 50%;
        display: flex;
        justify-content: space-around;
    }

    .c1 {
        position: relative;
        align-self: center;

    }

    .box {
        width: 100%;
        height: 100%;
        /* background-color: bisque; */
        display: flex;
        background-image: url('./bc.jpg');
        box-shadow: -10px 0px 10px orange;
    }

    .bc-yellow {
        font-size: 1rem;
        width: 20%;
        height: 100vh;
        border: 1px solid black;
        padding: 20px 5px 20px 5px;
        border-right: 2px dashed red;
        /* background-color: red; */
    }

    .content {
        height: 100vh;
        margin-left: 10px;
    }



    .contentc {
        overflow: auto;
        width: 80%;
        border: 1px solid black;
        border-left: none;
        font-size: 0.8rem;
    }

    .content:nth-child(n+2) {
        display: none;
    }
</style>